<template>
  <div>

        <exsearch></exsearch>    

		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品检索</h3>
				<div class="row">
					
					<div v-for="item in goodslist" class="col-sm-6 col-md-3 col-product">
						<figure>
							<img :src="'http://localhost:8000/static/upload/'+item.img" class="rounded-corners img-fluid" 	width="240" height="240">
							<figcaption>
								<div class="thumb-overlay"><a href="item.html" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item?id='+item.id">

            <div v-html="$options.filters.myfilter(item.name)"></div>

          </a></h4>
						<p><span class="emphasis">价格${{ item.price }}</span></p>
                        <p><span class="emphasis">描述${{ item.desc }}</span></p>
					</div>

				</div>

				<!--简单版分页容器-->
				<div>

					<Pagination layout="pager,jumper" small @change="get_goods" v-model="pagination" ></Pagination>
					

				</div>



			</div>
		</section>
		           
		
    
  </div>
  
</template>


 
<script>

//导入组件

import exsearch from './exsearch.vue'


export default {
  data () {
    return {
      msg: "这是一个变量",
      //搜索关键词
      text:'',
      //分页器变量
      pagination:{
      		//当前页
      		page:1,
      		size:2,
      		total:4
      },
      //商品列表
      goodslist:[],

    }
  },
  //注册组件标签
  components:{

      'exsearch':exsearch,


  },
  mounted:function(){

    //传递公告变量
    window.that = this;

    //接收参数
    var text = this.$route.query.text;

    //判断
    if(text.indexOf(' ')){


      text = text.split(" ");

      //格式转换
      text = JSON.stringify(text);

    }




    this.text = text;



  	this.get_goods();
   
  
},


//自定义过滤器
filters:{

  myfilter:function(value){


        value = value.replace(new RegExp(window.that.text,'g'),'<span class="highlight">'+window.that.text.replace('[','').replace(']','').replace('','').replace(/"/g,'')+'</span>');


        return value;


  }

},

  methods:{

  	//获取商品
  	get_goods:function(){

             console.log(this.text); 
      //发送请求
      this.axios.get('http://localhost:8000/searchs/',{params:{text:this.text}}).then((result) =>{
          console.log(result.data.data)

        this.goodslist = result.data.data;

        this.pagination.total = result.data.total;

      });

    }

     
  }
}


</script>
 
<style>

.highlight{
  color:red;
}

</style>